<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增任务')"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-order-add">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-1 control-label is-required">箱属：</label>
                <div class="col-sm-2">
                    <select class="selectpicker form-control" name="cusNo" id="cusNo"
                            th:with="cusNoVoList=${@dict.getCusNo()}" required data-live-search="true"
                            liveSearchStyle="contains" title="所有">
                        <option th:each="cusNoVo : ${cusNoVoList}" th:text="${cusNoVo.name}"
                                th:value="${cusNoVo.id}"></option>
                    </select>
                </div>


                <label class="col-sm-1 control-label is-required">船公司：</label>
                <div class="col-sm-2">
                    <select class="selectpicker form-control" name="cusNoS" id="cusNoS"
                            th:with="cusNoVoList=${@dict.getCusNoS()}" required data-live-search="true"
                            liveSearchStyle="contains" title="所有">
                        <option th:each="cusNoVo : ${cusNoVoList}" th:text="${cusNoVo.name}"
                                th:value="${cusNoVo.id}"></option>
                    </select>
                </div>
                <label class="col-sm-1 control-label is-required">箱型：</label>
                <div class="col-sm-2">
                    <select class="selectpicker form-control" name="xx" id="xx">
                        <option value="20">20</option>
                        <option value="40">40</option>
                    </select>
                </div>
                <label class="col-sm-1 control-label is-required">尺寸：</label>
                <div class="col-sm-2">
                    <select class="selectpicker form-control" name="cc" id="cc">
                        <option value="GP">GP</option>
                        <option value="HC">HC</option>
                        <option value="TK">TK</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label is-required">运抵国：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="country" id="country" value="">
                </div>
                <label class="col-sm-1 control-label is-required">指运港：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="port" id="port" value="">
                </div>
                <label class="col-sm-1 control-label is-required">箱数：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="number" name="num" id="num" value="0">
                </div>
                <label class="col-sm-1 control-label is-required">箱皮重：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="boxWeight" id="boxWeight" value="0">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label is-required">船名：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="shipName" id="shipName" value="">
                </div>
                <label class="col-sm-1 control-label is-required">航次：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="ovoy" id="ovoy" value="">
                </div>
                <label class="col-sm-1 control-label is-required">提单号：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="tdNo" id="tdNo" value="">
                </div>
                <label class="col-sm-1 control-label is-required">箱号：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="boxNo" id="boxNo" value="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label is-required">发货人：</label>
                <div class="col-sm-2">
                    <select class="selectpicker form-control" name="sendCustomer" id="sendCustomer"
                            th:with="shipperList=${@customer.getShipperList()}" data-live-search="true"
                            liveSearchStyle="contains" title="所有">
                        <option th:each="shipper : ${shipperList}" th:text="${shipper.name}"
                                th:value="${shipper.id}"></option>
                    </select>
                </div>
                <label class="col-sm-1 control-label is-required">收货人：</label>
                <div class="col-sm-2">
                    <select class="selectpicker form-control" name="receiveCustomer" id="receiveCustomer"
                            th:with="consigneeList=${@customer.getConsigneeList()}" data-live-search="true"
                            liveSearchStyle="contains" title="所有">
                        <option th:each="consignee : ${consigneeList}" th:text="${consignee.name}"
                                th:value="${consignee.id}"></option>
                    </select>
                </div>
                <label class="col-sm-1 control-label is-required">报关单号</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="bgdNo" id="bgdNo" value="">
                </div>
                <label class="col-sm-1 control-label is-required">品名：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="productName" id="productName" value="">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label is-required">编码：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="productCode" id="productCode" value="">
                </div>
                <label class="col-sm-1 control-label is-required">重量：</label>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="weight" id="weight" value="0">
                </div>
                <label class="col-sm-1 control-label is-required">出口日期</label>
                <div class="col-sm-2">
                    <div class="input-group date"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control" name="outDate" id="outDate" autocomplete="off" required>
                    </div>
                </div>
                <label class="col-sm-1 control-label is-required">进口日期</label>
                <div class="col-sm-2">
                    <div class="input-group"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control" name="inDate" id="inDate" autocomplete="off" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">业务类型：</label>
                <div class="col-sm-2">
                    <select class="selectpicker form-control" name="businessType" id="businessType">
                        <option value="进口">进口</option>
                        <option value="出口">出口</option>
                    </select>
                </div>
                <label class="col-sm-1 control-label">商品类型：</label>
                <div class="col-sm-2">
                    <select class="selectpicker form-control" name="productType" id="productType">
                        <option value="普货">普货</option>
                        <option value="危品">危品</option>
                    </select>
                </div>
                <label class="col-sm-1">扫描文件：</label>
                <div class="col-sm-5">
                    <input id="file1" type="file" multiple data-min-file-count="1">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">备注：</label>
                <div class="col-sm-11">
                    <textarea class="form-control" type="text" name="remark" id="remark" value=""></textarea>
                </div>
            </div>
            <div class="form-group" style="display: none">
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="zs" id="zs" value="">
                </div>
                <div class="col-sm-2">
                    <input class="form-control" type="text" name="bgdImg" id="bgdImg" value="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 ">证书：</label>
                <div class="col-sm-5 ">
                    <input id="fileinput-demo-1" type="file" multiple data-max-file-count="1">
                </div>
                <label class="col-sm-1 ">报关单：</label>
                <div class="col-sm-5">
                    <input id="fileinput-demo-2" type="file" multiple data-max-file-count="1">
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary " style="float: right" type="button" onclick="submitHandler()"><i class="fa fa-check"></i>&nbsp;提交
                </button>
                <button class="btn btn-primary " style="float: right" type="button" onclick="resetPre()"><i class="fa fa-refresh"></i>&nbsp;清空
                </button>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "business/order";

    //图片上传
    $(document).ready(function () {
        $("#file1").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': prefix + "/uploadFile2/1",
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: [],
            showPreview: false, //是否显示预览
            dropZoneEnabled: false, //是否显示拖拽区域
            maxFileSize: 2048,//单位为kb，如果为0表示不限制文件大小
            minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
            maxFileCount: 1, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
        });
    });
    $('#file1').on('fileuploaded', function (event, data, previewId, index) {
        console.log("data==:" + data.response.data);
        var d = data.response.data;
        $("#country").val(d.country);
        $("#port").val(d.port);
        $("#num").val(d.num);
        $("#boxWeight").val(d.boxWeight);
        $("#shipName").val(d.shipName);
        $("#ovoy").val(d.ovoy);
        $("#tdNo").val(d.tdNo);
        $("#boxNo").val(d.boxNo);
        $("#bgdNo").val(d.bgdNo);
        $("#productName").val(d.productName);
        $("#productCode").val(d.productCode);
        $("#weight").val(d.weight);
        $("#outDate").val(d.outDate);
        $("#inDate").val(d.inDate);
    });
    //图片上传
    $(document).ready(function () {
        $("#fileinput-demo-1").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': prefix + "/uploadFile/1",
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: [],
            maxFileSize: 2048,//单位为kb，如果为0表示不限制文件大小
            minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
            maxFileCount: 1, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
        });
    });
    $('#fileinput-demo-1').on('fileuploaded', function (event, data, previewId, index) {
        console.log("data==:" + data.response.data);
        $("#zs").val(data.response.data);
    });
    //图片上传
    $(document).ready(function () {
        $("#fileinput-demo-2").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': prefix + "/uploadFile/2",
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: [],
            maxFileSize: 2048,//单位为kb，如果为0表示不限制文件大小
            minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
            maxFileCount: 1, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
        });
    });
    $('#fileinput-demo-2').on('fileuploaded', function (event, data, previewId, index) {
        console.log("data==:" + data.response.data);
        $("#bgdImg").val(data.response.data);
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#outDate',
            type: 'date',
            trigger: 'click',
            value: new Date()
        });
        laydate.render({
            elem: '#inDate',
            type: 'date',
            trigger: 'click',
            value: new Date()
        });
    })

    $("#form-order-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-order-add').serialize());
        }
    }

    function resetPre() {
        window.location.reload();
    }

</script>
</body>
</html>

